<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <div class="logo"><a href="#" class="iconfont icon-wangyiyunyinle1">网易云音乐</a></div>
        <div class="download"><a href="#">下载APP</a></div>
    </header>
    <nav>
        <ul>
            <li><a href="index.html" class="active">推荐音乐</a></li>
            <li><a href="hot-music.html">热搜榜</a></li>
            <li><a href="search.html">搜索</a></li>
        </ul>
    </nav>
    <section>
        <!-- 公共内容标题 -->
        <div class="title">
            <a href="">编辑推荐</a>
        </div>
        <div class="recommend">
            <a href="#" class="item">
                <img src="./images/item.jpg" alt="">
                <p>时间治愈的是 愿意自渡之人</p>
                <span class="iconfont icon-erji">5603.5万</span>
            </a>
            <a href="#" class="item">
                <img src="./images/item.jpg" alt="">
                <p>时间治愈的是 愿意自渡之人</p>
                <span class="iconfont icon-erji">5603.5万</span>
            </a>
            <a href="#" class="item">
                <img src="./images/item.jpg" alt="">
                <p>时间治愈的是 愿意自渡之人</p>
                <span class="iconfont icon-erji">5603.5万</span>
            </a>
            <a href="#" class="item">
                <img src="./images/item.jpg" alt="">
                <p>时间治愈的是 愿意自渡之人</p>
                <span class="iconfont icon-erji">5603.5万</span>
            </a>
            <a href="#" class="item">
                <img src="./images/item.jpg" alt="">
                <p>时间治愈的是 愿意自渡之人</p>
                <span class="iconfont icon-erji">5603.5万</span>
            </a>
            <a href="#" class="item">
                <img src="./images/item.jpg" alt="">
                <p>时间治愈的是 愿意自渡之人</p>
                <span class="iconfont icon-erji">5603.5万</span>
            </a>
        </div>
        <div class="title">
            <a href="#">最新音乐</a>
        </div>
        <div class="music">
            <a href="#" class="item">
                <div class="music-name">
                    <p>辰大师</p>
                    <p class="iconfont icon-erji">陈奕迅-辰大师</p>
                </div>
                <span class="iconfont icon-bofang"></span>
            </a>
            <a href="#" class="item">
                <div class="music-name">
                    <p>辰大师</p>
                    <p class="iconfont icon-erji">陈奕迅-辰大师</p>
                </div>
                <span class="iconfont icon-bofang"></span>
            </a>
            <a href="#" class="item">
                <div class="music-name">
                    <p>辰大师</p>
                    <p class="iconfont icon-erji">陈奕迅-辰大师</p>
                </div>
                <span class="iconfont icon-bofang"></span>
            </a>
            <a href="#" class="item">
                <div class="music-name">
                    <p>辰大师</p>
                    <p class="iconfont icon-erji">陈奕迅-辰大师</p>
                </div>
                <span class="iconfont icon-bofang"></span>
            </a>


        </div>
        <footer>
            <a class="iconfont icon-wangyiyunyinle">网易云音乐<a/>
            <div><a href="#">打开APP,发现更多好音乐></a></div>
            <p>网易公司版权所有&copy;1907-2023 杭州乐读科技有限公司远营</p>
        </footer>
    </section>
</body>

</html>